<template>
	<view class="goodList">
		<view class="commodity_list">
			<view class="commodity_item" v-for="item in goods_list" :key="item.id" @click="toDetails(item.id)">
				<image class="item_img" :src="getImages(item.image)" mode=""></image>
				<view class="item_content">
					<text class="title">{{item.title}}</text>
					<view class="item_money">
						<text style="font-size: 28rpx;">¥</text>
						<text style="font-size: 35rpx;">{{item.sell_price}}</text>
					</view>
					<text class="sales">月销{{item.sold_count}}</text>
				</view>
				<button class="btn" type="default">立即抢购</button>
			</view>
		</view>
		
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				goods_list:[],
				status: 'loadmore',
				shop_type_id:null,
				leftid:1
			}
		},
		onLoad(option) {
			console.log(option)
			this.shop_type_id = option.id
			this.getShopGoods()
		},
		onReachBottom() {
			if(this.status == 'nomore') return
			this.getShopGoods()
		},
		methods: {
			getImages(images) {
				let img = JSON.parse(images).shift()
				return img
			},
			// 详情
			toDetails(id) {
				uni.navigateTo({
					url: '/pagesA/productDetails/productDetails?id=' + id
				});
			},
			getShopGoods() {
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "goods.index.index",
						uid:uni.getStorageSync('uid'),
						shop_type_id: this.shop_type_id,
						leftid: this.leftid
					},
					success: e => {
						const goods_list = e.data.data
						console.log(goods_list)
						this.goods_list = this.goods_list.concat(goods_list)
						this.status = goods_list.length < 6 ? "nomore" : "loadmore"
						this.leftid += 1
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
.goodList{
	.commodity_list {
		margin-top: 34upx;
		padding: 0 46upx 50upx 31upx;
		box-sizing: border-box;
	
		.commodity_item+.commodity_item {
			margin-top: 21upx;
		}
	
		.commodity_item {
			display: flex;
			position: relative;
			padding: 26upx 0 37upx 0;
			box-sizing: border-box;
	
			.item_img {
				width: 141upx;
				height: 141upx;
				border-radius: 10upx;
				margin-right: 14upx;
			}
	
			.item_content {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;
			}
	
			.title {
				font-size: 32upx;
				font-weight: 500;
				color: #242424;
			}
	
			.item_money {
				line-height: 28upx;
				font-weight: 500;
				color: #FF4E31;
			}
	
			.sales {
				font-size: 22upx;
				font-weight: 500;
				color: #535353;
			}
	
			.btn {
				position: absolute;
				right: 22upx;
				bottom: 43upx;
				width: 143upx;
				height: 64upx;
				line-height: 64upx;
				background: linear-gradient(141deg, #0CD8C2, #0BC2AE);
				border-radius: 32upx;
				font-size: 26upx;
				font-weight: 500;
				color: #FFFFFF;
				padding: 0;
				margin: 0;
			}
		}
	}
}
</style>
